<template>
  <div class="parent">
    <h1>父组件</h1>
    
    <ChildComponent>
      <template v-slot:header>
        <h2>第一项的标题</h2>
      </template>
      <template v-slot:content>
        <p>这是第一项的内容。可以在这里添加更多信息。</p>
      </template>
      <template v-slot:footer>
        <small>这是第一项的底部内容。</small>
      </template>
    </ChildComponent>

    <ChildComponent>
      <template v-slot:header>
        <h2>第二项的标题</h2>
      </template>
      <template v-slot:content>
        <p>这是第二项的内容。可根据需要进行更改。</p>
      </template>
      <template v-slot:footer>
        <small>这是第二项的底部内容。</small>
      </template>
    </ChildComponent>

  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
};
</script>

<style scoped>
.parent {
  margin: 20px;
}
</style>
